<template>
  <div class="type-button">
    <span>  {{title}}</span>
  </div>
</template>

<script>
  export default {
    name: "TypeButton",
    props: {
      title: String
    }
  };
</script>

<style lang="less">
.type-button {
  position: relative;
  width: 100px;
  height: 25px;
  border-radius: 15px;

  span {
    position: absolute;
    width: 100%;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: #FE6B17;
  }
  &::before,  &::after  {
    content: '';
    position: absolute;
    top: 2px;
    border-radius: inherit;
  }
  &::before {
    top: 0;
    left: 1px;
    z-index: 1;
    background-color: #301C7F;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
  }
  &::after  {
    top: 0;
    left: 0;
    z-index: 0;
    border: 2px solid #3DA6C0;
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width: 768px) {
  .type-button {
    position: relative;
    width: 140px;
    height: 25px;
    border-radius: 15px;

    span {
      font-size: 20px;
      position: absolute;
      width: 100%;
      bottom: 14px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      color: #FE6B17;
    }
    &::before,  &::after  {
      content: '';
      position: absolute;
      top: 2px;
      border-radius: inherit;
    }
    &::before {
      top: 0;
      left: 1px;
      z-index: 1;
      background-color: #301C7F;
      width: calc(100% - 2px);
      height: calc(100% - 2px);
    }
    &::after  {
      top: 0;
      left: 0;
      z-index: 0;
      border: 2px solid #3DA6C0;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
